<template>
  <BlankLayout class="ttemp-access">
    <a-card>
      <template #title>
        <div class="ttemp-access__title">
          <span>腾讯图片违规审核</span>
          <span class="ttemp-access__tip">
            TIPS:
            鼠标右键点击图片切换审核状态。未违规状态下，左键点击图片可放大查看，按ESC可退出查看模式。此页审查完毕后点击右侧确认提交审核结果。
          </span>
          <a-space>
            <a-select
              v-model:value="selectState.value"
              style="width: 200px"
              :options="selectState.options"
            ></a-select>
            <a-button
              type="primary"
              :loading="fetchAuditListLoading"
              @click="queryList"
            >
              查询
            </a-button>
          </a-space>
        </div>
      </template>
      <a-spin :spinning="fetchAuditListLoading || commitAuditResLoading">
        <template v-if="imgList && imgList.length > 0">
          <a-card-grid
            v-for="item in imgList"
            :key="item.id"
            style="
              width: 20%;
              text-align: center;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
            "
          >
            <a-button
              type="primary"
              size="small"
              class="ttemp-access__face-click"
              @click="previewImage(item)"
              >预览图片</a-button
            >
            <div
              class="ttemp-access__img-item"
              @click.right.prevent="select(item)"
              @click="selectFace(item)"
            >
              <a-image
                class="ttemp-access__image"
                :height="200"
                :src="item.image"
                :preview="false"
              >
                <template #placeholder>
                  <a-image
                    class="ttemp-access__image"
                    :height="200"
                    :src="`${item.image}?/q/10`"
                    :preview="false"
                  />
                </template>
              </a-image>
              <div
                v-if="item.status === ImageStatus.UNACCESS"
                class="ttemp-access__cover"
              >
                违规
              </div>
              <div v-if="item.checked === true" class="ttemp-access__cover">
                人脸
              </div>
            </div>
          </a-card-grid>
        </template>
        <a-empty description="暂无数据" v-else />
      </a-spin>
    </a-card>
    <div class="ttemp-access__option">
      <a-space direction="vertical" align="center">
        <a-button
          size="small"
          type="primary"
          @click="selectAllFace"
          :loading="fetchAuditListLoading || commitAuditResLoading"
          >全选人脸</a-button
        >
        <a-button
          size="small"
          type="primary"
          @click="cancelAllFace"
          :loading="fetchAuditListLoading || commitAuditResLoading"
          >取消人脸</a-button
        >
        <a-button
          size="small"
          type="primary"
          @click="selectAll"
          :loading="fetchAuditListLoading || commitAuditResLoading"
          >全选违规</a-button
        >
        <a-button
          size="small"
          type="primary"
          @click="cancelAll"
          :loading="fetchAuditListLoading || commitAuditResLoading"
          >取消违规</a-button
        >
      </a-space>
      <a-divider />
      <a-popconfirm
        title="确定此页已审核完毕？"
        ok-text="确认"
        cancel-text="取消"
        placement="bottomRight"
        @confirm="save"
      >
        <a-button
          type="primary"
          danger
          :loading="fetchAuditListLoading || commitAuditResLoading"
        >
          确认
        </a-button>
      </a-popconfirm>
    </div>
    <div class="ttemp-access__pagination">
      <a-pagination
        show-quick-jumper
        show-size-changer
        v-model:current="pageInfo.current"
        v-model:page-size="pageInfo.pageSize"
        :total="pageInfo.total"
        @change="queryList"
        @show-size-change="queryList"
        :show-total="formatShowTotal"
      />
    </div>
  </BlankLayout>
  <div
    class="ttemp-access__img-cover"
    v-if="coverVisiable"
    @click="coverVisiable = false"
  >
    <img :src="currentImage" alt="" />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import BlankLayout from '@/layout/BlankLayout.vue'

import { Pagination } from '#/antd'
import {
  ImageStatus,
  OptionStatusReq,
  QueryListReq,
} from '@/api/audit/content/model/ttempAuditModel'

import type { ImageItem } from '@/api/audit/content/model/ttempAuditModel'
import {
  commitAuditRes,
  fetchAuditList,
  TtempAuditApi,
} from '@/api/audit/content/ttempAudit'
import { useStore } from '@/store'
import { formatPagination } from '@/utils/antdOpFormatHelper'

const store = useStore()
const currentImage = ref('')
const coverVisiable = ref(false)
const selectState = ref({
  value: ImageStatus.WAIT,
  options: [
    { label: '待审', value: ImageStatus.WAIT },
    { label: '审核通过', value: ImageStatus.ACCESSS },
    { label: '审核不通过', value: ImageStatus.UNACCESS },
  ],
})
const pageInfo = ref<Pagination>({
  current: 1,
  pageSize: 20,
  total: 0,
})

type ImgItemWrapper = ImageItem & { checked: boolean; preview: boolean }
const imgList = ref<ImgItemWrapper[]>([])

onMounted(async () => {
  await queryList()
})

const previewImage = (item: ImgItemWrapper) => {
  currentImage.value = item.image
  coverVisiable.value = true
}

const queryList = async () => {
  const reqData: QueryListReq = {
    auditStatus: selectState.value.value,
    current: pageInfo.value.current,
    size: pageInfo.value.pageSize,
  }
  const { data } = await fetchAuditList(reqData)
  imgList.value = data.records.map((item) => {
    return {
      ...item,
      checked: false,
      preview: false,
    }
  })
  pageInfo.value = formatPagination(data)
}
const fetchAuditListLoading = computed(() =>
  store.getters['global/isOpLoading'](TtempAuditApi.QUERY_LIST)
)

const formatShowTotal = (total: number) => `共 ${total} 条数据`

const select = (item: ImgItemWrapper) => {
  if (item.checked && item.status !== ImageStatus.UNACCESS) {
    item.checked = false
  }
  if (item.status === ImageStatus.UNACCESS) {
    item.status = ImageStatus.ACCESSS
  } else {
    item.status = ImageStatus.UNACCESS
  }
}
const selectFace = (item: ImgItemWrapper) => {
  if (item.status === ImageStatus.UNACCESS) {
    item.checked = false
  } else if (item.checked) {
    item.checked = false
  } else {
    item.checked = true
  }
}

const selectAll = () =>
  imgList.value.forEach((item) => (item.status = ImageStatus.UNACCESS))

const selectAllFace = () =>
  imgList.value.forEach((item) => (item.checked = true))
const cancelAllFace = () =>
  imgList.value.forEach((item) => (item.checked = false))

const cancelAll = () =>
  imgList.value.forEach((item) => (item.status = ImageStatus.ACCESSS))

const save = async () => {
  const successList = imgList.value
    .filter(
      (item) =>
        item.status === ImageStatus.WAIT || item.status === ImageStatus.ACCESSS
    )
    .map((item) => item.id)

  const failList = imgList.value
    .filter((item) => item.status === ImageStatus.UNACCESS)
    .map((item) => item.id)

  const faceList = imgList.value
    .filter((item) => item.checked)
    .map((item) => item.id)

  const reqData: OptionStatusReq = {
    successList,
    failList,
    faceList,
  }
  // 提交审核结果
  await commitAuditRes(reqData)
  // 查询数据
  // pageInfo.value.current = 1
  await queryList()
}
const commitAuditResLoading = computed(() =>
  store.getters['global/isOpLoading'](TtempAuditApi.PUSH_AUDIT_RES)
)
</script>

<style lang="scss" scoped>
@include b(ttemp-access) {
  @include e(title) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
  }
  @include e(tip) {
    font-size: 14px;
    color: red;
    font-weight: 600;
  }
  @include e(img-item) {
    position: relative;
    cursor: pointer;
    z-index: 0;
    width: 100%;
  }
  @include e(face-click) {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
  }
  @include e(img-cover) {
    position: fixed;
    z-index: 9999;
    top: 0px;
    width: 100vw;
    height: 100vh;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.514);
    img {
      width: 1000px;
      height: 100%;
      object-fit: contain;
    }
  }
  @include e(image) {
    width: 100%;
  }
  @include e(cover) {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 85px;
    color: #ff00008c;
    font-weight: 600;
    user-select: none;
  }
  @include e(option) {
    position: fixed;
    display: flex;
    flex-direction: column;
    z-index: 1;
    top: 40%;
    right: 15px;
    padding: 20px 8px;
    background: #fff;
    border: 8px solid #eee;
    border-radius: 2px;
  }
  @include e(pagination) {
    display: flex;
    justify-content: flex-end;
    margin: 15px;
  }
}
</style>

<style lang="scss">
.ttemp-access {
  .ant-card-grid {
    padding: 12px;
  }
}
</style>
